@theme-color: #d33a31;
@black: #000;
@gold: #e7aa5a;
@blue: #517eaf;
@white: #fafafa;
//menu
@deepWhite: #f6f6f6;
@green: #60cba0;

@font-color: #000;
@font-size: 14px;
@font-size-medium-sm: 13px;
@font-size-lg: 16px;
@font-size-sm: 12px;
@font-size-xs: 10px;
@font-size-medium: 15px;
@font-size-title: 18px;
@font-size-title-lg: 24px;

@font-weight-bold: 700;

@font-color-transparent: rgba(255, 255, 255, 0.5);

// scrollbar
@scrollbar-width: 8px;
@scrollbar-height: 8px;
@scrollbar-color: #d7d7d7;
@scrollbar-track-color: #f5f5f5;
@scrollbar-thumb-color: #d7d7d7;
@scrollbar-thumb-hover-color: #c8c8c8;

// @media screen and (max-width: 500px) {
//   .container {
//     .main {
//       .pic {
//         & > img {
//           width: 200px;
//           height: 200px;
//           border: 6px solid #e9e9e9;
//           -webkit-user-drag: none;
//         }
//       }
//     }
//   }
// }

// menu
@menu-width: 210px;
@menu-height: 100vh;
@menu-bgcolor: @deepWhite;
@menu-title-color: #b2b2b2;
@menu-item-font-color: #595959;
@menu-item-active-font-color: #fff;
@menu-item-active-bgcolor: @green;
@menu-item-hover-bgcolor: #dddddd;

// header
@header-width: calc(100vw - @menu-width);
@header-height: 75px;
@header-bgcolor: @white;
@header-padding:10px 30px;

//player
@player-width: calc(100vw - @menu-width);
@player-height: 75px;
@player-bgcolor: @white;
@player-padding:10px 30px;
@player-info-width: calc((@player-width - 70px - 60px) / 3);
@player-control-width: calc((@player-width - 70px - 60px) / 3 - 100px);
@player-playlist-width: calc((@player-width - 70px - 60px) / 3 + 100px);
@player-playlist-icon-color: #7d7d7d;

//page
@page-padding-vertical: 10px;
@page-padding:10px 30px;
@page-width: calc(100vw - @menu-width);
@page-height: calc(100vh - @player-height - @header-height - @progress-wrapper-height);
@page-bgcolor: @white;

//input
@input-padding:8px 16px;
@input-bgcolor: #e1e1e180;
@input-border-radius: 20px;
@input-height: 15px;
@input-res-board-width: 250px;
@input-res-board-height: 60vh;
@input-res-board-bgcolor: #fff;
@input-res-board-box-shadow: 8px 8px 50px #99999930, -8px -8px 50px #99999930;
@input-res-board-border-color: #99999930;

//navigation
@navigation-color: #7d7d7d;
@navigation-hover-color: #5fc998;
@navigation-disabled-color: #eaeaea;

//tab
@tab-active-bgcolor: @green;
@tab-active-line-width: 3px;

//cardlist
@cardlist-item-margin:20px 10px;
@cardlist-item-margin-top: 20px;
@cardlist-item-margin-left: 10px;
@cardlist-item-width: calc((@page-width - @cardlist-item-margin-left * 10 - 140px) / 4);
@cardlist-img-width: calc(@cardlist-item-width - 30px);
@cardlist-img-border-radius: 10px;
@cardlist-icon-width: 40px;
@cardlist-icon-relative: calc(
  (@cardlist-item-width + @cardlist-item-margin-top * 4) / 2 + @cardlist-icon-width * 2
);
@cardlist-toplay-width: 50px;
@cardlist-toplay-relative: calc((@cardlist-img-width - @cardlist-toplay-width) / 2);
@cardlist-toplay-hover-color: #61cca5;

//SingerCard
@singercard-width: calc(@page-width - 60px);
@singercard-item-width: calc((@page-width - @cardlist-item-margin-left * 20 - 140px) / 4);

//list
@list-width: calc(@page-width - 60px - 200px);
@list-name-width: calc(@list-width * 2 / 7);
@list-singer-width: calc(@list-width * 5 / 7 * 2 / 5);
@list-album-width: calc(@list-width * 5 / 7 * 2 / 5);
@list-interval-width: calc(@list-width * 5 / 7 * 1 / 5);

//button
@button-padding:8px 16px;
@button-border-radius: 20px;
@button-default-bgcolor: #e6e6e6;
@button-default-hover-bgcolor: #dfdfdf;
@button-primary-bgcolor: @green;
@button-primary-hover-bgcolor: #5abf90;
@button-primary-font-color: #fff;
@button-font-size: 15px;
@button-simple-font-color: #808080;
@button-simple-hover-font-color: #afe3cb;
@button-more-hover-font-color: #7d7d7d;

//progress
@progress-wrapper-height: 7px;
@progress-height: 3px;
@progress-padding-vertical: 2px;
@progress-bg-color: #d7d7d7;
@progress-done-bg-color: @green;
@progress-done-height: 3px;
@progress-width: calc(@player-width - @progress-dot-width);
@progress-dot-width: 5px;

//PlayListModal
@playlistmodal-height: 100vh;
@playlistmodal-width: 350px;
@playlistmodal-bgcolor: #fff;
@playlistmodal-padding: 10px 20px 0 20px;

@banner-width: calc(@page-width - 200px - 20px);

//SongModal
@songmodal-bg-color: #fff;
@songmodal-width: @page-width;
@songmodal-height: calc(100vh - 82px);
